// 接口请求
import axios from 'axios'

// qs:在登录时axios请求数据传参时无法正常的获取数据，原因时传递参数要将参数序列化
// qs.stringify() 是将对象序列化成URL的形式，以&进行拼接
// qs.stringify({name:'Tom',age:'23'}) 结果是"name=Tom&age=23"
// qs.stringify(name=Tom&age=23) 结果是{name:'Tom',age:23}

import qs from 'qs'
// 使用create方法创建axios实例  根据指定配置创建一个新的axios
const http = axios.create({
    // timeout:7000, //请求超时时间
    baseURL: 'http', //默认路径
    // headers:{'Content-TYype':'application.json;charset=UTF-8'}
    // 请求头第一种方式  这个看后端解释内容的方式
});
// axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
// 请求头第二种方式  这个看后端解释内容的方式
// 第一：请求拦截器  我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，
// 我们拦截请求是用来做什么呢？比如，有些请求需要用户登录之后才可以访问的，或者post
// 请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作

// 这里说一下token，一般实在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进行页面
// 的时候(即在mian.js中)，会首先从本地存储读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态，然后，
// 在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果
// 没有携带，则说明没有登录过。




http.interceptors.request.use((config) => {
    if (config.method == 'post') {
        // 添加一些共同的字段
        // config.data['roleId']='共同字段'
        config.data = qs.stringify(config.data)//序列化
    }
    if (config.method == 'get') {
        // 在里面的一些操作
    }
    return config;
}, (error) => {
    // 对请求错误做些什么  方法返回一个带有拒绝原因(error参数)的Promise对象
    return Promise.reject(error);
});
// 响应拦截器  就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。 例如上面的思想，如果后台
// 返回的状态码时200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是
// 进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

http.interceptors.response.use((response) => {
    // 对响应数据做点什么
    console.log(response);
    const status = response.status;
    if (status == 200) {
        console.log(response.data.data);
        return response.data.data
    } else {
        return response
    }
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default http